<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" href="favicon.ico" type="image/x-icon"/>
	<link rel="stylesheet" href="examples-styles.css"/>
	<style>
        .paper-wrapper {
            margin: 0 auto;
        }
	</style>

	<title>abcjs: Responsive Demo</title>
	<script src="../dist/abcjs-basic.js" type="text/javascript"></script>
	<script type="text/javascript">
		var abcString = "T: Cooley's\n" +
			"M: 4/4\n" +
			"L: 1/8\n" +
			"R: reel\n" +
			"K: Emin\n" +
			"|:D2|EB{c}BA B2 EB|~B2 AB dBAG|FDAD BDAD|FDAD dAFD|\n" +
			"EBBA B2 EB|B2 AB defg|afe^c dBAF|DEFD E2:|\n" +
			"|:gf|eB B2 efge|eB B2 gedB|A2 FA DAFA|A2 FA defg|\n" +
			"eB B2 eBgB|eB B2 defg|afe^c dBAF|DEFD E2:|";

		function load() {
			var visualOptions = {responsive: 'resize'};
			var visualObj = ABCJS.renderAbc("paper", abcString, visualOptions);
			makeResponsiveInBothAxis();
			window.addEventListener('resize', makeResponsiveInBothAxis);
		}

		function makeResponsiveInBothAxis() {
			var paper = document.querySelector(".paper-wrapper");
			var svg = document.querySelector("#paper svg");
			var rect = paper.getBoundingClientRect();
			var viewBox = svg.getAttribute('viewBox').split(' ');
			var musicWidth = Math.ceil(viewBox[2]);
			var musicHeight = Math.ceil(viewBox[3]);
			var musicRatio = musicWidth / musicHeight;
			var margin = 40;
			var containerWidth = Math.ceil(window.innerWidth - margin);
			var containerHeight = Math.ceil(window.innerHeight - rect.top - margin);
			var containerRatio = containerWidth / containerHeight;
			var tooTall = (containerRatio > musicRatio);
			if (tooTall) {
				var newWidth = Math.floor(containerWidth / containerRatio * musicRatio) - 2; // the 2 is just to give it a tiny margin.
				paper.style.width = newWidth + "px";
			} else {
				paper.style.width = "99%";
			}
		}
	</script>
</head>
<body onload="load()">
<header>
	<img src="https://paulrosen.github.io/abcjs/img/abcjs_comp_extended_08.svg" alt="abcjs logo">
	<h1>Zoom To Fit</h1>
</header>
<div class="container">
	<p>Change the browser height and width to see how the music fills up the available space.</p>
</div>
<div class="paper-wrapper">
	<div id="paper" class="visible-background"></div>
</div>
</body>
</html>
